<template>
    <div>
        
        <div class="goodsindex">
            <!-- 搜索条件 -->
            <!-- <el-row :gutter="20" class="goodsindex-queryInfo">
                <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2" v-if="isAuth('sys:user:save')">
                    <el-button type="primary" class="goodsindex-queryInfo-li" size="small" @click="handleEdit()">添加
                    </el-button>
                </el-col>
                <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2" v-if="isAuth('sys:user:list')">
                    <el-button size="small" type="danger" class="goodsindex-queryInfo-li" @click="handleDelete()"
                        :disabled="dataListSelections.length <= 0">批量删除</el-button>
                </el-col>
            </el-row> -->
            <!-- 检索结果 -->
            <el-row :gutter="20" class="goodsindex-list">
                <el-col :span="24">
                    <el-table :data="userList" border size='small' :height="tableMaxHeight" @selection-change="selectionChangeHandle"
                        style="width: 100%">
                        <el-table-column type="index" header-align="center" align="center" label="序" width="50">
                        </el-table-column>
                        <el-table-column type="selection" header-align="center" align="center" width="50">
                        </el-table-column>
                        <el-table-column prop="approverName" header-align="center" align="center" label="名称"
                            min-width="180">
                        </el-table-column>
                        <el-table-column prop="userNames" header-align="center" align="center" label="审批人" min-width="180">
                        </el-table-column>
                        <el-table-column width="180" prop="address" header-align="center" align="center" label="操作">
                            <template slot-scope="scope">
                                <el-button v-if="isAuth('sys:user:update')" size="mini" type="primary"
                                    @click="handleEdit(scope.row.approverId)">修改</el-button>
                                <!-- <el-button v-if="isAuth('sys:user:delete')" size="mini" type="danger"
                                    @click="handleDelete(scope.row.userId)">删除</el-button> -->
                                <!-- <el-button
							  size="mini"
							  type="primary"
							  @click="handleJurisdiction(scope.$index, scope.row)">菜单权限</el-button> -->
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <!-- 分页 -->
            <el-row :gutter="20" class="goodsindex-list">
                <el-col :span="24" class="goodsindex-page-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pageIndex" :page-sizes="[1, 10, 20, 50, 100]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
                    </el-pagination>
                </el-col>
            </el-row>
            <userAddorUpdata v-if="userAddorUpdataVisible" ref="userAddorUpdata" @getUserlist="getUserlist">
            </userAddorUpdata>
        </div>
    </div>
</template>

<script>
import headers from '../../components/header/header.vue'
import userAddorUpdata from './approver/addAndUpdata.vue'
export default {
    components: {
        userAddorUpdata,
        headers
    },
    data() {
        return {
            userAddorUpdataVisible: false,//新增 修改
            queryInfo: {
                name: '',
                type: ''
            },
            userList: [],
            dataListSelections: [],//批量删除
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            options: [
                {
                    label: 1,
                    value: '管理员'
                },
                {
                    label: 2,
                    value: '普通用户'
                }
            ]
        }
    },
    created() {
        this.getUserlist();
    },
    computed: {
      tableMaxHeight() {
        return window.innerHeight - 180 + "px";
      },
    },
    methods: {
        //获取用户列表
        getUserlist() {
            this.Sevice({
                url: 'sys/approver/list',
                method: 'get',
            }).then(res => {
                if (res && res.code == 200) {
                    this.userList = res.list;
                    this.totalPage = res.list.length;
                    this.userList = this.userList.slice(
                        (this.pageIndex - 1) * this.pageSize,
                        this.pageIndex * this.pageSize
                    );
                } else {
                    this.userList = [];
                    this.totalPage = 0;
                }
            }).catch(err => {
                console.log(err);
            })
        },
        //修改
        handleEdit(userId) {
            this.userAddorUpdataVisible = true
            this.$nextTick(() => {
                this.$refs.userAddorUpdata.init(userId)
            })
        },
        // 多选
        selectionChangeHandle(val) {
            this.dataListSelections = val
        },
        //删除
        handleDelete(id) {
            var userIds = id ? [id] : this.dataListSelections.map(item => {
                return item.userId;
            })
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.Sevice({
                    url: 'sys/approver/delete',
                    method: 'post',
                    data: userIds
                }).then(res => {
                    if (res && res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getUserlist();
                    }
                }).catch(err => {
                    console.log(err);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 分页
        handleSizeChange(val) {
            this.pageSize = val;
            this.getUserlist();
        },
        handleCurrentChange(val) {
            this.pageIndex = val;
            this.getUserlist();
        }

    }
}
</script>

<style scoped>
.goodsindex {
    width: 100%;
    min-height: 100%;
    padding: 15px;
    box-sizing: border-box;
}

/* 搜索 */
.goodsindex-queryInfo {
    margin-bottom: 10px;
}

.goodsindex-queryInfo-li {
    width: 100%;
    height: auto;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 列表 */
.goodsindex-list {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

/* 分页 */
.goodsindex-page-box {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
}
</style>